<template>
    <el-row style="height:100%" type="flex">
        <div style="width:150px;min-width:150px;height:100%;border-right:1px solid #e0e0e0;background-color: #081832;">
            <ul>
                <li v-for="(item,index) in menus" :key="index" :class="{'active':activeIndex == index}" @click="doRouter(item,index)">
                    <span class="go-back">{{item.name}}</span>
                </li>
            </ul>
        </div>
        <el-scrollbar wrap-class="child-wrap-class" style="flex:1;">
            <el-col>
                <el-breadcrumb separator="/" style="height:30px;background-color:#fff;padding:3px;margin-bottom: 5px;display: flex;align-items: center;">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="to">{{name}}</el-breadcrumb-item>
                </el-breadcrumb>
                <transition name="fade-transform" mode="out-in">
                    <router-view class="avue-view" />
                </transition>
            </el-col>
        </el-scrollbar>
    </el-row>
</template>

<script>
import store from '@/store'
let permissions = store.getters.menuPermissions
export default {
    name: 'index',
    data() {
        return {
            activeIndex: 1,
            menus: [
                {
                    path: '/admin/user',
                    rule: ['rule:user'],
                    name: '用户管理'
                },
                {
                    path: '/admin/menu',
                    rule: ['rule:menu'],
                    name: '菜单管理'
                },
                {
                    path: '/admin/role',
                    rule: ['rule:role'],
                    name: '角色管理'
                },
                {
                    path: '/admin/dept',
                    rule: ['rule:dept'],
                    name: '部门管理'
                },
                {
                    path: '/admin/config',
                    rule: ['rule:config'],
                    name: '参数管理'
                },
                {
                    path: '/admin/dict',
                    rule: ['rule:dict'],
                    name: '字典管理'
                }
            ],
            to:'',
            name:''
        }
    },
    methods: {
        doRouter(item, index) {
            this.activeIndex = index
            this.name = item.name
            this.to = {path:item.path}
            this.$router.push({ path: item.path })
        }
    },
    mounted() {
        this.menus.forEach((menu,index)=>{
            let _index = permissions.findIndex(permission=>{
                return menu.rule[0] == permission
            })
            if(_index == -1){
                this.menus.splice(index,1)
            }
        })
        this.name = this.menus[0].name
        this.to = {path:this.menus[0].path}
        this.doRouter(this.menus[0], 0)
    }
}
</script>
<style scoped>
li {
    padding: 10px;
    cursor: pointer;
    background-color: #081832;
    color: #fff;
}
li:hover {
    opacity: 0.6;
    background-color: #034c6a;
}
.active {
    box-shadow: inset -10px 0 15px #034c6a, inset 0 -10px 15px #034c6a, inset 10px 0 15px #034c6a, inset 0 10px 15px #034c6a;
}
</style>